<template name="uni-countdown">
	<view class="uni-countdown">
		<view class="uni-countdown-numbers" @click="click" :id="id"
			:style="{color:tabFontColor,borderColor:borderColor, background:bgrColor}"> {{text=='获取验证码'?'':s }}{{text}}
		</view>
	</view>
</template>
<script>
	export default {
		name: "uni-countdown",
		props: {
			// tabFontColor: {
			// 	type: String,
			// 	default: "#02A0E7"
			// },

			bgrColor: {
				type: String,
				default: "#fff"
			},

			borderColor: {
				type: String,
				default: "#fff"
			},

			splitorColor: {
				type: String,
				default: "#fff"
			},
			timer: {
				type: String,
				default: ""
			},
			phone: {
				type: String,
				default: ""
			},
			getStatus: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				setTime: null,
				h: '00',
				i: '00',
				s: '',
				leftTime: 0,
				text: '获取验证码',
				id: 1,
				resultData: {},
				tabFontColor: '#284F93'
			}
		},
		created: function(e) {
			var reg = /^([0-9]{4})-([0-9]{2})-([0-9]{2}) ([0-9]{2}):([0-9]{2}):([0-9]{2})$/;
			var res = this.timer;
			if (res == null) {
				return false;
			} else {
				var s = parseInt(res);
				if (s < 0 || s > 60) {
					return false;
				}
				// var leftTime = new Date(i, s);
				this.leftTime = '60';
				this.countDown(this);
				this.setInterValFunc(this);
			}
		},
		beforeDestroy() {
			clearInterval(this.setTime)
		},
		methods: {
			sms() {
				let _this = this;
				_this.tabFontColor = "#999999";
				_this.text = 's后重新获取';
				_this.s = 60;
			},
			setInterValFunc: function(obj) {
				this.setTime = setInterval(function() {
					obj.countDown(obj);
				}, 1000);
			},
			click: function() {
				let _this = this;
				if (this.phone.length == 11 && (!this.s || this.s == 60)) {
					_this.$emit('obtainCode'); //请求验证码接口
				} else if (this.phone.length != 11) {
					uni.showToast({
						title: '请正确输入您的手机号',
						duration: 2000,
						icon: "none"
					});
				}
			},
			countDown: function(self) {
				if (this.phone && self.text == 's后重新获取') {
					if (self.s > 0) {
						self.s -= 1;
					} else if (self.s == 0) {
						this.tabFontColor = "#FF5001";
						self.s = 60;
						self.text = '获取验证码'
					}
				}
			}
		}
	}
</script>
<style>
	.uni-countdown {
		position: absolute;
		right: 0;
		top: 0;
	}

	.uni-countdown-splitor {
		width: auto !important;
		justify-content: center;
		line-height: 44upx;
		padding: 0 5upx;
	}

	.uni-countdown-numbers {
		line-height: 44upx;
		width: auto !important;
		padding: 0 10upx;
		justify-content: center;
		height: 44upx;
		/* border-radius: 8upx; */
		margin: 0 5upx;
		/* border: 1px solid #000000; */
		font-size: 28upx;
	}
</style>